Find solution
How to dynamically append li to ul?

Can someone interpret this CSS garbage? what does ul mean?

  • .sf-menu{     font-family: Arial, Helvetica, sans-serif; padding:0px; margin:18px 20px 20px 35px; } .sf-menu > li{ position:relative; float:left; margin:0px 0px 0px 0px; padding-right:45px; } .sf-menu ul{ position:absolute; width:180px; left:0; display:none; } .sf-menu > li > a { text-decoration:none; display:block; font-size:15px; color: 00b0f0; padding:0px 0 0 0; } .sf-menu > li.current > a, .sf-menu > li:hover > a, .sf-menu > li.sfHover > a { color: #00b0f0; text-decoration:none; } .sf-menu li:hover ul,.sf-menu li.sfHover ul{top:35px; left:0; z-index:999;} .sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em} .sf-menu li.current,.sf-menu li:hover,.sf-menu li.sfHover{ text-decoration:none; } .sf-menu li li a{ display:block; margin:0; position:relative; text-decoration:none; font-size:12px; line-height:14px; color: #00FF66; overflow:hidden; padding:8px 5px 8px 15px; font-family: 'Open Sans', sans-serif; background:url(../images/sub-nav-tail.png); } .sf-menu li li > a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current > a{ color: #000099; } .sf-menu li li li a { background:url(../images/header-bg.png); } .sf-menu li li{ float:none; position:relative; margin:0 0 1px 0; } .sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:186px;top:0;}

  • Answer:

    First, CSS is not garbage. Your code snippet looks like a navigation menu for a website, albeit fairly poorly written. It is difficult to define exactly what it is going on without having a visual representation, though it appears to be several rules describing the appearance of navigation sub-items, among other things. A <ul> is a generic container for ordered <ol> and unordered <ul> lists. It is used for creating styled lists, with bullet points or another kind of style, or it can be used for arranging a navigation menu with the default styling removed. If none of this makes sense to you, then I suggest you check out some books on front-end web development.

Matthew Petrucci at Quora Visit the source

Was this solution helpful to you?

Other answers

CSS has made it possible to do far more with sites that we could in the early days when we only had HTML. But it can be confusing at first. As Matthew indicates your code is the CSS for a menu. It looks like it is probably a drop down menu that will show you submenu items when you hover over a parent item. (such menus typically show content dropping down below top level menu items or flying out to the side.) Here are the elements involved: .sfmenu would be a container box for the whole menu. ul acts as a container for an unordered list. li acts as a container for items in the list. a refers to a link. In this case it would be a link for the text within the lists. The HTML could look something like this: <div class="sfmenu"> <ul> <li><a href="linkone.html">Menu Item One</li> <li><a href="linktwo.html">Menu Item Two</li> <li><a href="linkthree.html">Menu Item Three <ul> <li><a href="linkthreeA.html">Menu Item Three A</li> <li><a href="linkthreeB.html">Menu Item Three B</li> <li><a href="linkthreeC.html">Menu Item Three C</li> </ul> </li> </ul> </div> Note that Menu Item Three has another list inside it. These would be the sub menu items. Your menu may have additional sub menus as it is styled for 3 levels. (Lists within lists within lists.) Your CSS controls what these lists look like and how they behave when someone hovers over a link. It controls the size of the elements, the positioning, the font, colors (2 blues and 1 green) and background images.

Heidi Cool

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.