I want my drop down list top apear inline aswell as in the same place. So if you over over each list it will just change the text. http://868rcacs.ca/test.php
Right Now I have the drop down list working. But when you hover over Admin the list will apear right below it and not to the far left. Is there a way to fix this without using individual classes or id's?
Add the following styles:
nav{
position:relative;
}
nav li ul {
display: none;
position: absolute;
left: 10px;
}
This ensures that your layout doesn't break and you get what you want. Don't forget to thank me if this works ;-) Just kidding!
Related
I am trying to custom my bullets for a list inside a specific < div > tag.
For that I created a class associated with the < div > tag, and in my CSS stylesheet I asked for the bullets that I want inside lists within that tag.
However, the bullets do not appear the way I want them to. The code seems to work, because I can add other cutomisations within the CSS style (make the text of the list bigger for instance), and it works.
I am using Spip for my website; maybe some of you won't be familiar with it: in my website's backoffice, I created a input area named TAKE_WITH_YOU and that's where the list is. Spip converts the list into a valid HTML list (ul and li), but I cannot access this code directly.
Here is my HTML code:
However, despite those changes, the bullets don't change from their default style.
The code seems to work okay, because as I said before, I can change the font-size by changing the CSS, and if I put none in the ul list-style-type, the bullets do dissapear. However, any other value (disc, square, an image, a hex code) brings me back to my original bullets...
.take_it ul {
list-style-type: "\25A1";
/*
I have also tried with:
list-style-image: url(puce-blanche.gif);
And with
list-style-type: "□";
*/
}
.take_it li::before {
content: "\25A1";
/*Also tried with other values as above*/
position: absolute;
left: 0;
}
<BOUCLE_150(MOTS){titre=« 150. take_with_you »}>
#SET{ident_div,#TEXTE*}
#SET{title_div,#DESCRIPTIF}
</BOUCLE_150>
[(#TAKE_WITH_YOU*|oui)
<div id="#GET{ident_div}" class=« take_it »>
<h3>[(#GET{title_div}|textebrut)]</h3>
[(#TAKE_WITH_YOU*|cs_decoupe_compat|propre)]
</div>
]
What am I doing wrong?
Thank you.
You can use list-style:none to customize the list-style. By looking at your code, I assume you are trying to use :before pseudo class to display the custom list style.
ul {
list-style: none;
position: relative;
padding: 0;
margin:0;
}
li {
margin-left: 20px;
}
li:before {
content: "\25A1";
position: absolute;
left: 0;
}
<ul>
<li>Take this</li>
<li>Take this one too</li>
<li>Take this one last time</li>
</ul>
I'm creating a simple category tree for a shop and I have a problem, its look like that:
Question is how to fix its that big space that appears root-cat:hover, can anyone explain whats problem and what a solution.
Fiddle
Copied some html and css that I have in my tree, hope it will help.
You can add these rules, which will fix things for the first sub menu and partly for the other ones:
root-cat {
position: relative;
}
.sub-cat {
position: absolute;
left: 260px;
top: 8px;
}
Fiddle: https://jsfiddle.net/eLat18Ls/1/
Note: To have the other submenus appear not at the top of their page, but beside their main menu entries, you have to nest the sub menus into their respective main menu entries (in the HTML). Usually, this is done with unordered lists: ul and li elements. Just google for how to build a menu using ul and li
So I, like all of you have a menubar (header) on top of my website
and recently found out how to use icons.
Now What I need is a menu wich at first shows ONLY the Icons and when you hover over the text (e.g. HOME, SHOP, etc.) shows up to the right of the icon.
Any way to to this with css?
Thx!
Yes, you can do this with CSS.
Here's an example:
Create a <span> class: <span class="hideBeforeShow"></span>.
<ul>
<li><span class="hideBeforeShow">Test</span></li>
</ul>
Next, make sure you make the class hidden using visibility: hidden;:
li .hideBeforeShow
{
visibility: hidden;
padding-left: 7px;
padding-right: 7px;
}
(padding is added to separate it from the icon)
Next, you'll want to make it show when you hover over the <li></li> element. After you hover over it, you can select it by adding the class name afterwards:
li:hover .hideBeforeShow
{
visibility: visible;
}
Next, you'll want to hide the icon. Set the content to nothing, or hide the image, whatever you want to do.
li:hover:after
{
font-family: none;
content '';
}
You can substitute these 'font-awesome' icons with images instead. The same concept applies.
Here's the jsFiddle example. Play with it.
I am trying to make my first pure css/html dropdown menu but I was having a hard time getting the Hover function to work properly. I received great answers but this time, its all messed up and its not in the right spot. I am so lost at this point.
http://jsfiddle.net/X5Dbc/
position: absolute; or somthing like that...
i have a hunch it has somthing to do with positioning
the jsfiddle above is what i have after asking about the "Dropdown" effect..
Keep in mind I am still a novice when it comes to proper CSS. Any Advice or help making this menu work would be most appreciated! And constructive criticism is always welcome.
Your markup is not valid. IDs must be unique. ie you can't use the same ID on muiltiple elements. That's what class is for. There is no need to use IDs for this anyway.
#navwrap ul li ul {
display: none;
}
#navwrap ul li:hover ul {
display: block;
position: relative;
}
Move the :hover to the parent li
You can style the two ul seperately like this:
Top level:
#navwrap > ul { your styles ... }
Sublevel:
#navwrap ul ul { your styles ... }
I´m trying to create a menu with the list 'ul'.
The problem I´m facing is:
The submenu doesn´t appear at the top of its corresponding menu link, but, below.
You can see it at this link:
http://jsfiddle.net/6r6e8/
Thanks.
Try including a top value in your CSS:
ul.menu ul {
top: 0;
}
You could add margin-top: -21px to your ul.menu ul styles as a quick fix.