I have the following design problem. I have a list of items and I want to make the whole of each of the first li to be a clickable link. I have tried adding a link in each li, making it a block level element and positioning it absolute, but that doesn't work because the parent and all li's are floated left for layout purposes. Any help would be appreciated, thanks
<ul style='float:left;width:x>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
</ul>
If the parent li has position: relative, you can position things absolutely inside it without messing with the way the parent floats around.
Another, somewhat inelegant solution would be to add an onclick event to each of the parent lis, and use JavaScript to change the URL. Also, add cursor: pointer to your CSS to make it look like a link. But as I said, this is not elegant.
Have you thought about jQuery as an option? Its probably not the best solution but it would work. so i would rig something up like this:
$("ul li:first-child").bind('click',function(){
// click event here.
alert("Boom!");
$(this).find("li a").trigger('click');
});
and i would have your code look like this:
<ul>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
</ul>
Put the links in the li and use display:block. Don't absolutely position them.
Related
I'm making a typora theme and styling it with CSS. I don't really have much access to the HTML generated since it's generated by the program, but it does provide a lot of flexibility.
I'm trying to just move UL ::markers a couple pixels to the right.
Anyone know a solution?
Thanks much.
As #enhzflep suggested in a comment, you could increase the space before the bullet by applying padding on the ul in CSS. Here's how it's done (I have made two lists—ordered and unordered):
ul {
padding-inline-start: 39px
}
<ol>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ol>
<hr>
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
I m having a list with ul and li s.
Now I want to apply a css rule to the parents only and not to the children.
For this I'm using the > symbol but that is applied to the children as well.
The example here
The code I used at the css -
#nav > li a {
padding-bottom: 30px;
}
The html being -
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
I think you want to use #nav > li > a which covers a children of the <li>. Otherwise any <a> descendant of the <li> is also selected (which is everything).
As of CSS3, there is no way to select an element based on its children. I think that something like that is coming in CSS4, but I'm not sure.
Small note: the > selector selects only the children, not the parents and the children.
the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)
Hi
I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu
I can't get passed this. Can anyone please advise.
My menu code is:
<ul id="menu">
<li id="home">Home</li>
<li id="general">General
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus">About Us</li>
<li id="ss4aagency">Agency</li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li>What's on next</li>
<li>Competitions</li>
<li>End of Year Show</li>
<li>Summer School</li>
<li>Master Classes</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
</div>
</li>
<li id="nearestclass">Nearest Class</li>
<li id="tutorials">Tutorials</li>
<li id="shop">Shop</li>
<li id="hireus">Hire Us</li>
<li id="contact">Contact</li>
the page in question is http://www.streetstyles4all.co.uk/test4.html
I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.
Try using the css z-index property for your images. As easy as z-index: 3;
Or try resizing the images also with css.
I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want