I have a unordered list as a menu.
All items have a background-color. What I want is that the width of the item does not fill the width of the list, and that the item (including the background-color) is aligned to the right in the list. I hope you understand and might have an answer.
HTML:
<ul class="menu">
<li><a class="menuitem">First</a></li>
<li><a class="menuitem">Secondwithlongertext</a></li>
<li><a class="menuitem">Thirdbitshorter</a></li>
</ul>
And CSS:
ul li a.menuitem{
background-color:#000;
color:#fff;
}
As per you requirement you have to wrap the text inside the <span>. Here is a working Demo.
Here is the HTML code.
<ul class="menu">
<li><a class="menuitem"><span>First</span></a></li>
<li><a class="menuitem"><span>Second Item with long text can come here</span></a></li>
<li><a class="menuitem"><span>Thirdbitshorter</span></a></li>
</ul>
ul {
background-color:gold;
color:#fff;
}
ul li{
background: #990000;
}
ul li a {
text-align: right;
}
ul li span{ background:black;}
ul {
background-color:#000;
color:#fff;
width: 100%;
}
ul li{
background: #990000;
width: 50%;
}
ul li a {
text-align: right;
}
This should work for you if I understand what you're asking. Sometimes I make the backgrounds different colors just to clearly be able to see what is going on.
Related
I need to align dropdown menu along the length of the page. I have a menu :
<ul class="nav navbar-nav menu">
<li>About the company
<img src="images/arr1.png" ></img>
<ul>
<li class="first_li">Mission</li>
<li>History</li>
<li>Vacancy</li>
<li>Best Experts</li>
</ul>
</li>
</ul>
Then I have some css styles to make this dropdown menu to be align in as I thougth right manner.But it doesn't work correctly.
.menu li{
list-style: none;
float: left;
line-height:84px;
}
.menu li:hover > ul {
display: block;
background-color: rgb(231,231,231);
position:absolute;
top:84px;
left : 0px;
width: 100%;
text-align:center;
padding:0;
z-index:1;
}
.menu .language:hover > ul {
display:block;
width:84px;
line-height:30px;
}
Part of the problem looks like you have most of your list style in the 'hover' part. Try putting that into the general menu style.
I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.
I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help
#Contentmenu ul {
margin: 0;
padding: 40px;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {
display: inline;
padding:10px;
float: left;
}
#contentmenu a {
display:block;
padding:10px;
width:200px;
color:#ffffff;
font-size:26px;
background-color:#c7daff;
}
#Contentsubmenu ul {
margin: 0;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {
display:block;
floa:left;
}
#contentsubmenu a {
display:block;
width:200px;
color:#000000;
font-size:20px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
HTML
<div id="contentmenu">
<ul>
<li>Header 1
<div id="contentsubmenu">
<ul>
<li>Article 1</li>
<li><a href="#" Article 2</a></li>
</ul>
</div>
</li>
<li>Articl3</li>
</ul>
if you want to only target the top-level , you would use this:
#contentmenu > ul
and
#contentmenu > ul > li
Also, CSS is case-sensitive, so make sure you are using #contentmenu
Does this fix your other issue as well?
Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.
Demo on JSFiddle
Therefore that you are new in CSS:
Try to write clean code with correct indentations.
I'm tearing my hair out here.
I have horizontal dropdown menu on a site I am building. The menu is made up of an unordered list, with the dropdown part made up of hidden child elements that pop up when you roll over the parents.
In Firefox everything appears to be fine, but, in Chrome and Safari, while the last child element in each menu is acting as expected, all other child elements are shunted left by one pixel. So, in the example below, Child A3, Child B4, and Child C2 are aligned perfectly with their respective parents, while the rest are not.
Can someone please shed some light on what is going wrong here?
Code and screenshots below...
How it should look...
How it actually looks...
I have included the entire nav block of the CSS just in case I have missed something outside of the actual parent/child part.
HTML
<nav>
<div id="menu" class="menustrip">
<ul>
<li class="page_item">
Parent A
<ul class='children'>
<li class="page_item">Child A1</li>
<li class="page_item">Child A2</li>
<li class="page_item">Child A3</li>
</ul>
</li>
<li class="page_item">Parent B
<ul class='children'>
<li class="page_item">Child B1</li>
<li class="page_item">Child B2</li>
<li class="page_item">Child B3</li>
<li class="page_item">Child B4</li>
</ul>
</li>
<li class="page_item">Parent C
<ul class='children'>
<li class="page_item">Child C1</li>
<li class="page_item">Child C2</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS
#menu, #main-nav{
width: 950px;
margin: 0 30px 0 0;
padding-right: 30px;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: #78B2E2;
text-align: right;
}
ul#main-nav{
list-style: none;
padding-top: 10px;
margin-right:30px;
}
.page_item, .navlink{
display: inline-block;
background-color: #243488;
height: 34px;
width: 110px;
margin-left: 1px;
text-align: center;
}
.page_item a, .navlink a{
padding-top: 4px;
display: block;
height: 34px;
width: 110px;
}
.page_item:hover, .navlink:hover{
background-color: #78B2E2;
}
.page_item:active, .navlink:active{
background-color: #78B2E2;
}
/* Hide Sub Menus by default */
#menu ul li ul.children {
display:none;
z-index:100;
}
/* Display Sub Menus on rollover of parent */
#menu ul li:hover ul.children {
display:block;
position:absolute;
top:205px;
margin: 0 0 0 -11px; /*pull child menus in line with parent */
width: 132px;
list-style: none;
}
/* Style sub menu items not to float like parent items */
#menu ul li ul.children li {
float:none;
width:110px;
height: 34px;
background-color:#243488;
border-top: 3px solid #ffffff;
font-size: 11px;
}
#menu ul li ul.children li:hover {
background-color:#78B2E3;
color:#243488;
}
/* Sub Menu link color */
#menu ul li ul.children li a:hover {
color:#243488;
}
#menu ul li ul.children li a {
color:#ffffff;
}
Not sure what causes it exactly, but it has to do with the fact that the list items in <ul class="children"> are inline-blocks and the ul itself is centered.
So you have two solutions: either align the ul to the left instead of centering it
.children {text-align:left;}
or, make its list items blocks instead of inline blocks.
.children > li {display:block;}
Either of those adjustments will get rid of the display anomaly. In both cases, you will also have to increase the left margin, but I'm sure that won't be a problem.
Changing .children .page_item to display:block rather than display:inline-block seemed to fix it in my Chrome. This also required a bit more margin-left to re-align things.
.children .page_item {
display:block;
margin-left:10px;
}
Is it possible to display a sub-list beside it's parent using only css and no fixed width?
I'm trying to implement a navigation menu in css. I managed to display the first submenu under it's parent.
But when it come to the submenu of the submenu, I only manged to put it beside it's parent with a fixed offset. But since the offset can differ depending on the width of the parent, and the width of the parent change depending of the browser used, that solution does not work.
here is my css
.main-nav{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
text-align: center;
}
.nav-centered {
display: inline-block;
text-align: left;
margin:0;
padding:0;
z-index:10;
}
.nav-main-menu {
list-style-type: none;
background-color:#91a056;
margin:0;
padding:0;
height:25px
}
.nav-main-menu li {
display: inline;
text-align: center;
float:left;
position:relative;
}
.nav-main-menu li a img {
padding-bottom:0px;
color: #fff;
background-color: #91a056;
}
.nav-main-menu li a:hover {
background-color: #bbc888;
}
.nav-main-menu li li a:hover, .nav-main-menu li li span:hover, .nav-main-menu li li span:hover {
background-color: #bbc888;
}
.nav-main-menu li:hover ul {
display:block;
float:left;
}
.nav-main-menu li li, .nav-main-menu li li li {
display:block;
text-align:left;
width:100%;
border: 3px ridge #91a056;
}
.nav-main-menu li ul, .nav-main-menu li li ul, .nav-main-menu li:hover li ul {
display:none;
position:absolute;
}
.nav-main-menu li li:hover ul {
display:block;
float:left;
top:0px;
left:176px; /* I want to get rid of this fixed offset */
}
.nav-main-menu li li li a, .nav-main-menu li li a, .nav-main-menu li li span {
display:block;
text-align: left;
white-space: nowrap;
font-size:100%;
color: #FFF;
padding: 0 1em;
background-color: #91a056;
}
.nav-main-menu li li a span{
padding: 0;
}
.nav-main-menu li a {
margin-left:auto;
margin-right:auto;
font-size:120%;
text-decoration: none;
padding: 0 1em;
color: #fff;
background-color: #91a056;
}
I want to get rid of the .nav-main-menu li li:hover ul left offset.
And here is the revelant part of my html code
<div xmlns="http://www.w3.org/1999/xhtml" class="main-nav">
<div class="nav-centered">
<ul class="nav-main-menu">
<li><a href="/" ><span>Acceuil</span></a></li>
<li><a href="/?_=/page/regle" ><span>Regles de jeu</span></a>
<ul>
<li><span>Les personnages</span>
<ul>
<li><a href="/?_=/page/regle/commencer" ><span>Se creer un personnage</span></a></li>
<li><a href="/?_=/page/regle/race" ><span>Les Races</span></a></li>
<li><a href="/?_=/page/regle/alignement" ><span>Les Alignements</span></a></li>
<li><a href="/?_=/page/regle/entrainement" ><span>Les Entrainements</span></a></li>
<li><a href="/?_=/page/regle/conpetence" ><span>Les Competences</span></a></li>
<li><a href="/?_=/page/regle/handicape" ><span>Les Handicapes</span></a></li>
<li><a href="/?_=/page/regle/dieu" ><span>Les Dieux</span></a></li>
<li><a href="/?_=/page/regle/doamine" ><span>Les Domaines</span></a></li>
<li><a href="/?_=/page/regle/sort" ><span>Les Sorts</span></a></li>
<li><a href="/?_=/page/regle/profile" ><span>Les Profiles</span></a></li>
<li><a href="/?_=/page/regle/terrictoire" ><span>Les Terrictoires</span></a></li>
<li><a href="/?_=/page/regle/prestige" ><span>Les Prestiges</span></a></li>
</ul>
</li>
<li><span>Les reglements</span>
<ul>
<li><a href="/?_=/page/regle/combat" ><span>Les Combats</span></a></li>
<li><a href="/?_=/page/regle/etatAlterer" ><span>Les Etats Alteres</span></a></li>
</ul>
</li>
<li><span>L'univers</span>
<ul>
<li><a href="/?_=/page/regle/seigneurie" ><span>Les Seigneuries</span></a></li>
<li><a href="/?_=/page/regle/groupe" ><span>Les Groupes</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-login"><a href="/?_=/login" ><span>Inconnue</span></a>
<ul>
<li><a href="/?_=/login" ><span>Se connecter</span></a></li>
</ul>
</li>
<li><a href="/?_=/page/info" ><span>Qui sommes-nous?</span></a></li>
<li><a href="/?_=/forum" ><span>Forum</span></a></li>
<li><a href="https://www.facebook.com/" ><img alt="Page facebook" src="/img/icon-facebook.gif" style="max-width:19.0px;max-height:19.0px;" /></a></li>
</ul>
</div>
</div>
As you are positioning the submenu absolutely, it is not possible to allow it to grow and position the second submenu next to a fluctuating width parent submenu, at least not without JS.
In my experience, generally you would most likely want a fixed width submenu and not be at the mercy of content, because if the content is quite long, this will not look good in the design, at least 99% of the time.
So I would suggest you constrain the submenu's maximum width and with a bit of planning you can allow for larger content and if long content is unavoidable simply allow it to drop on to two lines.
Also I understand this is probably just example CSS for asking the question, but your CSS styles are not very well laid out and do not cascade very well, this can make advanced CSS styling hard and time-consuming. Try to avoid using long, unclear and complex selectors, the beauty of CSS is being able to easily cascade styles. Smaller concise selectors also help performance.
Using a class you can reduce
.nav-main-menu li li li {}
to
.submenu ul li{}
I realise this is not exactly the answer you were probably looking for but I have created a quick basic fiddle with styles to style your submenu's HTML with my suggestions. I have added a class of .submenu to all li's that contain submenu's, including secondary submenu's.
http://jsfiddle.net/lee_gladding/xRyMW/
hope this helps
I am trying to setup a menu with sub menu that contains ul. My question is how to remove the sub ul menu background image that inherits from the menu ul. I appreciate any help. Thanks a lot!
my html
<ul id="menuBar">
<li id="test1">test1</li>
<li id="test2">Pro1
<div class="subMenu">
<ul>
<li>sub1</li> //all li a would get the same
//backgroundimage btForTest2.jpg
// butI just want a clean background
<li>sub2</li>
<li>sub3</li>
</ul>
<ul>
<li>Volleyball</li>
<li>Walking</li>
<li>Water Shoes</li>
</ul>
</div> <!--end of submenu-->
</li>
</ul>
CSS:
#menuBar #mens a{
background:url("../images/btForTest2.jpg") no-repeat;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}
.subMenu li a{
list-style:none;
margin: 0;
padding: 5px;
width: 200px; //width is 112px not 200 px
float: left;
color:#ffffff;
text-decoration:none;
}
.subMenu li a
{
background: none;
}
if it is not sticking, you can add the !important flag
.subMenu li a
{
background: none !important;
}
Add the following to the .subMenu li a section:
background:none !important;
Edit: Opened tab before durilai answered, so I didn't see his answer...
Instead of adding another rule to overwrite the mistake, rewrite the selector on your first rule to only apply to the outer list items:
#menuBar > li > a {
background: red;
}
> means a direct descendant.