CSS drop down menu -
was trying to get a "pure CSS" dropdown displayed at the top level and hidden on the second level but the sub-items Can not be displayed on the hover ??
Your problem may be probably because you incorrectly created your html sub-menu (< Code> .level-2 ) should be nested inside the .level-one
li
elements:
& Lt; Div id = "navtree" & gt; & Lt; Ul class = "level-one" & gt; & Lt; Li & gt; & Lt; A href = "/ about /" title = "about" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ contact /" title = "contact" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ feed / latest /" title = "subscribe" & gt; Subscribe & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ test1 /" title = "test 1 page" & gt; Test 1 & lt; / A & gt; & Lt; Ul class = "level-two" & gt; & Lt; Li & gt; & Lt; A href = "/ test1 / testub /" title = "test1subpage" & gt; Test 1 sube & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ test2 /" title = "test2page" & gt; Test 2 & lt; / A & gt; & Lt; Ul class = "level-two" & gt; & Lt; Li & gt; & Lt; A href = "/ test2 / subpage2 /" title = "testbook page 2" & gt; Testb Page 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;
If you use the following CSS:
.level-one {display: inline; Status: Relative; } .level-one {display: none; Status: Completed; Left: 0; Top: 1 AM; / * Adjust as needed * /. Level-A: Hover Level-2 {display: block; }
I think you should be enough to get started. Feel free to ask any questions or update your question in the comments.
Besides, since I believe that you are quite new to this, I would like to give you the following context:
- For all things, the CSS menus Along with Snack and Amazing: by Stu Nichols
- How to identify and how to:.
- A brief introduction, from.
There are dozens, if not hundreds and more ...
Comments
Post a Comment