I am using superfish menu and I am having a problem which I can't figure out although I'm sure the answer is probably obvious and I'm just missing it...
Basically my a elements are not expanding to fill their containing li elements, even though the a elements are set to display:block
Please see example here:
http://www.spiritlevel.co.uk/fpatest/index_hover2.html
css is here:
http://www.spiritlevel.co.uk/fpatest/css/superfish.css
http://www.spiritlevel.co.uk/fpatest/css/superfish-vertical.css
Here's the relevant HTML
<div id="homenav">
<ul id="nav" class="sf-menu sf-vertical">
<li id="company">COMPANY
<ul id="companymenu">
<li id="profilelink">Profile</li>
<li id="activitylink">Activity</li>
<li id="strategylink">Strategy</li>
<li id="teamlink">Team</li>
<li id="financelink">Finance & Governance</li>
</ul>
</li>
<li id="development">DEVELOPMENT
<ul id="developmentmenu">
<li id="partnerslink">Development Partners</li>
<li id="sociallink">Social Responsibility</li>
</ul>
</li>
<li id="projects">PROJECTS</li>
<li id="contact">CONTACT US</li>
</ul>
</div><!--end homenav -->
A second issue I am having is how to get the second level menu to appear in the same place for each first level link. If you hover over company then it's 2nd level nav appears in the right place. But if you hover over development, it appears 1 row too low - i would like it to appear in the same place as the company menu did
Can anyone help me out with this please? thanks
Remove padding-right from .sf-menu a.sf-with-ul (superfish.css line-93) and add width 100% or 140px (home.css line 75) in #nav li a. I've tested it on your site and works fine. Tested in chrome and ff.
The reason your links aren't expanding to fill the box is because they are floated left. Remove that and you should be fine.
Related
My problem is the zoom out function in the Chrome. I have no problem with IE, but Chrome makes my menus expand and I dont know why. Probably the pixel values cause this but need for help, thanks.
Look at the menu with black background and the other menu on Chrome and don't forget to zoom out until it is 33% or 25%.
Edit: If I give a value to the "li" element, the menu doesn't expand, but i can't give a value to the "li".
You can look at
<!-- menu -->
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Subscribe</li>
<li>Login</li>
</ul>
</div>
<!-- menu -->
http://jsfiddle.net/2cfaT/1/
I am trying to define two menu's in my header using the bootmetro framework. The first is my main menu and the second is my user menu.
For some reason the menu is visualized wrong the second time, the line space of the menu items are too large.
The code used to create a menu looks something like this
<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
Actions
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li class="divider"></li>
<li>item4</li>
</ul>
</div>
The problem I run in to is shown in the screenshots below. In my second menu the menu item does not take the full with of the menu.
UPDATE:
The problem seems to be in the bootmetro CSS stylesheet and firebug narrows the search a bit (thanks Thanh Trung!). In inspect mode I can clearly see that the a href does not fill the menu item (li) in my second menu, while it does take the max width in my first menu.
The part in the bootmetro CSS looks like this:
.dropdown-menu li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
Additional question: What does this '>' cause? I have never seen that before.
In both menus the CSS class "dropdown-menu" is used, BUT, when I remove the body of this CSS class only the first menu changes accordingly.
Main question: So why is this class not properly inherited by me second menu item?
For completeness again the HTML code for the second menu (the menu that shows the artifact):
<div class="dropdown pull-left">
<a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
<b class="icon-settings"></b>
</a>
<ul class="dropdown-menu pull-right">
<li>Settings</li>
<li>Settings</li>
<li>Settings</li>
<li class="divider"></li>
<li>Log out</li>
</ul>
</div>
Correctly visualized menu
Wrongly visualized menu
Inspection: the "a" is not taking the full width
Inspection: the list item is taking the full width
Because the code is identical, but there are difference when displaying, it means that the css is affecting it. Without given us the css, it's impossible to tell what is the problem.
Here are css properties that could affect the total height of an element: height, line-height, padding, margin.
You can use Firebug or Chrome inspector to inspect an element to see its styles
UPDATE
bootmetro.css line 2018 is affecting (overriding) it
#top-info a {
display: inline-block;
height: 46px; /**** should be removed or override *****/
color: #5A5A5A;
}
Also I suggest you to use Firebug (an addon of firefox) to inspect elements, dont use the inspector of Firefox
I have a dropdown menu that I am using and can't quite get it to work.
<ul id="nav" class="dropdown dropdown-linear dropdown-columnar">
<li>Home</li>
<a href="http://www.example.com/products/index.php"><li class="dir">Products
<ul>
<li class="dir">Buckyballs</li>
<li class="dir">Calico Critters</li>
<li class="dir">Games</li>
<li class="dir">Magnetics</li>
<li class="dir">Playmobil</li>
<li class="dir">Quercetti</li>
</ul>
</li></a>
<li>Calendar</li>
...
</ul>
The menu is white with red text and then changes when I hover over them from red background to white text. However, when I hover over Products, the whole thing goes red when I hover over the li tag, and the text only goes white when I hover over it. But when I hover over what drops down, it's all red again. See the Navigation bar at redballoontoystore.com . Any help?
Add
.dir:hover a {
color: white!important;
}
to your css code. The !important is probably optional if you place the rule in the right place.
I'm pretty sure that if you switch the nesting of list item elements with your anchor tags, this will fix your issue:
<li class="dir">Buckyballs</li>
I'm creating a sidenav that has some major links that lead to a list of lesser links. A few of the lesser links are listed after the major links. Should I:
format the html like
<ul id="whatever">
<li id="child">
</li>
<li id="descendent">
</li>
</ul>
and use a ul id child selector;
or format the html like
<ul>
<li class="major">
</li>
<li class="minor">
</li>
</ul>
and use a li class selector;
or format the html like
<div class="left nav-major">
<ul>
<li>
</li>
</div>
<div class="left nav-minor">
<li>
</li>
</ul>
</div>
and use div selectors;
or do something else?
If I should do something else, what should it be?
Obviously, I'm trying to optimized load time.
CSS doesnt' really affect load time aside from how large your CSS file is.
In your examples, the first and second are exactly the same in terms of the HTML structure.
The 3rd example is not valid markup.
If you want to optimize load time, use the least amount of markup and CSS as you can.
That said, don't go overboard. There's a pragmatic middle-ground as you want to keep the markup semantic and human readable to make it maintainable.
Since a navigation list is typically a list of links, lists seem appropriate:
<ul>
<li>Main level link
<ul>
<li>Child level link</li>
</ul>
</li>
</ul>
And there'd be no need for classes, as you could reference the levels in your css as:
.navigation li {style main level links}
.navigation li li {style secondary level links}
I'd like to have a logo (say it's square for simplicity) with 4 links that pop up when it is moused over. These would be positioned Above, Below and to the sides of the menu/logo.
Is this achievable with only CSS? Any suggestions for how one might go about doing it?
Semantically I'd like to order them with in the page something like:
<ul><li>Logo
<ul><li class="north">North</li>
<li class="west">West</li>
<li class="east">East</li>
<li class="south">South</li>
</ul>
</li>
</ul>
But have them show up on the page like:
North
West Logo East
South
Yes.
HTML
<ul><li>Logo
<ul id="map"><li class="north">North</li>
<li class="west">West</li>
<li class="east">East</li>
<li class="south">South</li>
</ul>
</li>
</ul>
CSS
#map li a {
display: none;
}
#map li:hover a {
display: block;
}
Note that IE6 won't fire the :hover pseudo class on anything but links (you might want to change your markup).
Also simply use absolute positioning to position the popups.
See the general idea here.