How can I render the triangle outside the container element? - css

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

How do I remove the blue shading around Navigation elements with sub-menu items?

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.

Bootstrap navbar positioning in css

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>

CSS Bootstrap - Horizontal nav using ul li right aligned, and

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

Slide-out menu with CSS transitions

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.

Horizontal list with select box

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;

Resources