I'm trying to build a menu with CSS. When the li element has a class of active, I want a triangle (of a specific size) to appear next to the container. Please see the following http://jsfiddle.net/hcabnettek/MeczJ/
As I increase the left property, the arrow goes to the end of the container, but slides behind it. I tried z-index and various other things but I can't seem to figure it out.
Any help would really be appreciated. Thanks all!
<nav>
<ul class="nav main-nav">
<li class="active">
<a href="/home">
<i class="icon-home"></i>
<h6>Home</h6>
<div class="items"></div>
</a>
</li>
</ul>
</nav>
Make the li set to overflow: visible. This should probably fix the problem. If not, also check that the ul, which has a set width, is also set to overflow: visible.
Related
I'd appreciate any help with this.
I've been through the styles and can't find what is causing this problem; I need to remove the blue shadow element that occurs when hovering over a top navigation menu element. This is only happening for items with sub-menu items and only happen sin Chrome and Safari.
Here's the link to the problem navigation http://www.freedomflooring.co.nz/testing-changes.html
The site is using Zurb Foundation framework.
<nav class="marketing-topbar">
<div class="desktopMenuWrap ">
<ul class="dropdown menu" data-dropdown-menu data-click-open="false">
<li>About
<ul class="submenu menu vertical" data-submenu>
<li>Approach</li>
<li>Finance</li>
</ul>
</li>
</ul>
</div>
</nav>
You are probably looking for outline: 0px; which will remove the "border" when an element is focused. I tested it with Chrome and it works well for me.
See https://developer.mozilla.org/en/docs/Web/CSS/outline for more information on outline.
Usually navbar elements such as the menu link are placed where you want them in your html file. But for certain reasons I need to do this in my css file.
Is there any way for example to change the alignment of my navbar-menu links from left to right? By the way: Margin-left: xx px; does not help here because it destroys the responive behaviour of bootstrap.
Thanks a lot!
Try float: right; property to your navbar-menu links I think it should work.
or USE
.pull-right or .pull-left class of bootstrap.
<ul class="navbar-nav pull-right">
</ul>
<ul class="navbar-nav pull-left">
</ul>
I am using twitter bootstrap 2.3, I need the menu to be aligned to the right and also need the anchor to have a diferent widt, depending on the size of the world inside the anchor.
With next code, it's working, I leave empty columns with offset class, but not sure it there is a better to achieve the same result with another technique.
What I don't know how to do it is get the same "empty space separation" between each li, each li having a different width.
<div class="row_fluid">
<ul class="menu_logged span7 offset5">
<li class="span1 offset6"><a>Test</a></li>
<li class="span1"><a>Medium phrase</a></li>
<li class="span1">123</li>
<li class="span1">Hello World</li>
<li class="span2">Back</li>
</ul>
</div>
Any help?
Thank you
I have a vertical menu that needs some sub-menus. I can accomplish a decent-looking one just by putting a ul tag inside the link I want to expand and absolute-positioning it on hover, with display:none when it's inactive. But I'd like to make it slide out, and I haven't had any luck doing so. I have this basic markup:
<aside>
<ul>
<li>Link Text</li>
<li class="more">
Base
<ul>
<li></li>
</ul>
</li>
</aisde>
The aside tag is itself a secondary navigation menu, the main one is in my header. It is position:fixed for easy access while scrolling.
The ul tag inside of <li class="more"> is absolutely positioned, anchored to -1px on the top and width:154px, and on hover it becomes display:block; left:154px (of course, it is display:none when inactive). I have tried transitioning the left property, but it does not change anything, it acts as if my transition weren't even there.
I am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;