Enhancing CSS and HTML: Increasing the Border Color of Dropdown Menus and Utilizing Multiple Words per Dropdown Item

https://i.sstatic.net/ZI8Ch.png

CODE

div.box {
display: block;
text-align: center;
margin: auto;
z-index: 5
}



#navMenu {
margin: 0;
padding: 0;

}

#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
}

#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background:#999;
}

#navMenu ul li a {
text-align: center;
text-decoration:none;
height: 30px
width:300px;
display: block;
color: #FFF;
border:1px solid #000;
text-shadow: 1px 1px 1px #000;
}

#navMenu ul ul {
position: absolute;
visibility: hidden;
bottom: 31px

}

#navMenu ul li:hover ul {
visibility: visible;
}

/*****************************************************************************/

#navMenu li:hover {
background:#09F;
}

#navMenu ul li:hover ul li a:hover {
background:#CCC;
color: #000;
}

#navMenu a:hover {
color: #000;
}

.clearFloat {
clear:both;
margin: 0'
padding:0;

}
<!DOCTYPE html>
<html>
<head>
<title>ZEFROLITY</title>
   <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
  <link href="main.css" rel="stlesheet" type="text/css">

</head>
<body>

<div class="box">
<img src="icon1.png" alt="zefrolity" width="50%" height="50%">
</div>


<div id="wrapper">
<div id="navMenu">

<ul>
...

<br class="clearFloat">

</div> <!--end navMenu -->
</div> <!--end wrapper div -->




</body>
</html>

I am looking to enhance the drop-down menu functionality by ensuring that it covers the entire bottom section, rather than just limited areas on the left. Additionally, I would like to incorporate more grey tones next to the text to allow for multiple words to be placed on the same line, resulting in a cleaner appearance.

Best Regards,

Zefrolity; Your assistance is greatly appreciated

Answer №1

A common mistake observed was the absence of a semi-colon after defining the CSS rule height: 30px, leading to the subsequent rules for that selector being disregarded.

To resolve this issue, it is essential to specify a percentage width for the top-level li elements as there are a total of 8 items. To ensure that the menu spans the full width, each primary item should be assigned a width of 12.5%. By utilizing a direct child selector (#navMenu > ul > li) specifically targeting these first-level items, you can achieve the desired styling. Further instructions have been included within the code for additional assistance.

div.box {
display: block;
text-align: center;
margin: auto;
z-index: 5
}

#navMenu {
margin: 0;
padding: 0;
}

#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
}

#navMenu li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
background:#999;
}

/* Direct child selector for first level li only */
#navMenu > ul > li {
    float: left;
    width: 12.5%; /* Set width here (100 / 8 items) */
}

#navMenu ul li a {
text-align: center;
text-decoration:none;
height: 30px; /* Semi-colon was missing */
display: block;
color: #FFF;
border:1px solid #000;
text-shadow: 1px 1px 1px #000;
}

#navMenu ul ul {
position: absolute;
width: 100%; /* Be full width of parent */
visibility: hidden;
bottom: 100%; /* Be 100% from bottom of parent */
}

#navMenu ul li:hover ul {
visibility: visible;
}

/* Other CSS styles omitted for brevity */

.clearFloat {
clear:both;
margin: 0;
padding:0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it feasible to modify a JavaScript value through the PHP GET method?

My HTML file contains the following JavaScript code: var a=["","#"] I want to append a value after the # symbol by specifying that value in the website URL. For example: site.com/#value Therefore, the updated JavaScript code will be: var a=["","#va ...

Fuzzy text in drop-down box on Chrome, clear on Firefox

I've encountered an issue with a dropdown menu in Google Chrome where the content appears blurry, while it displays correctly in Firefox. The problem arises when the dropdown exceeds a certain height, and I've tried setting a max-height with over ...

CSS Styling for Adjusting Table Cell Widths

In my HTML table, I am trying to set the overall width while ensuring that the label column does not become too wide. Although it functions correctly in Firefox 4, IE 9 seems to be completely ignoring the width property. <html> <head> <sty ...

Ways to make a div grow to occupy the leftover width without resorting to the overflow: hidden technique

<div id="container" style="width:100%;"> <div id="left1" style="float:left; width:100px;">float left</div> <div id="left2" style="float:left; width:100px;">float left</div> <div id="remaining">Remaining width&l ...

Building a local database using the MVC framework concept

Can a locally stored database be developed using MVC framework principles in javascript and html5? Thank you Ravindran ...

Review a roster of websites every half a minute (Revise pages every half an hour??)

Just starting out with HTML coding! Can someone please provide the code that will allow me to save various webpages and automatically cycle through them every 30 seconds? And also ensure that the webpages are updated every 30 minutes. ...

A guide to accessing and managing events for the child inside a div element using extjs4

How can I dynamically switch between the divs with classes "icon-right" and "icon-left" when clicked? Here is an example of the HTML and ExtJS code involved: Html code: <div class="msg"> <div> <div cla ...

How to Ensure an Element Appears Above Another Despite Z-Index Troubles?

After conducting approximately 2 hours of research on this topic, I was unable to find clear answers or solutions. Hence, I have decided to address the issue here. The problem I'm facing is as follows: Due to the nature of HTML/CSS, it seems impossi ...

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

What steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

I have arranged three divs in a row with a 10px margin between them within a responsive layout. Currently, the divs have margin-left: 10px; margin-right: 10px; to create spacing. However, I aim to align them perfectly within the wrapper without any extra ...

Utilize JavaScript and HTML to show error messages based on whether the user is deactivated or if the input is invalid

I need to show different error messages under the 'Email Address' input if the user is disabled and under the 'Password' input if the user is invalid. In my debugging process, I discovered that a user being disabled results in a "Status ...

The dropdown feature in AngularJS experiencing sporadic malfunctions on Google Chrome

HTML: <select id="bId" ng-options="b as b.name for b in books" ng-model="selectedBook" ng-change='onBookChange()'> </select> The issue: The options are not always displaying and the selected option is not visible. List ...

What is the best way to include a dialog div within a form tag?

I am facing an issue with a JQuery dialog on my webpage. The data entered into the dialog seems to get lost because the dialog is placed outside the form tag. Here is how it appears: https://i.stack.imgur.com/fnb07.png So far, I have attempted this soluti ...

IE7, IE6 display margins differently compared to other browsers

Can anyone help with an issue I'm having with a CSS ul list menu? #header-container #header ul.top-nav { float: left; margin: 20px 0 20px 10px; } #header-container #header ul.top-nav li { float: left; margin-right: 8px; border-rig ...

Enhance your viewing experience with the Zoom feature that activates when

I recently noticed on that I am able to zoom/enlarge a photo by clicking on it. Is there a way for me to incorporate this feature without purchasing the entire theme? While I understand the theme is designed for purchase, I only need this specific functi ...

How to prevent the animation from triggering when changing the theme

Currently, I am developing a game that is similar to the concept of . In my game, I have implemented both dark and light themes along with animations that are triggered when the API sends a response (such as flipping a div and changing the background col ...

Steps for setting all textareas on a website to "readonly" mode

My website contains numerous textareas but they currently do not have the read-only attribute. It would be very time-consuming to manually add the readonly attribute to each one. Is there a more efficient method to make all textareas read-only? ...

Automatically Switch Font Colors to Red and Green

I am looking to automate the process of changing multiple textbox colors based on the class property. <input type="text" Class="ChangeColor" /> <input type="text" Class="ChangeColor" /> <input type=& ...

The art of placing images using CSS

I'm having trouble aligning the images into two rows of three, with the news section on the right side below the navigation bar. I've tried different methods but can't seem to get it right. Both the image and link should be clickable, but I& ...