Can a dropdown menu be incorporated into a list-group class div element?

I am currently using a list as a navigation menu for a page. My goal is to add dropdown options for quick-links and social-media. I really like the design of the list as a navigation menu.

   <div class="headBlock">
            <h1>G A L L E R Y</h1>

            <br>
            <div class="list-group">

                <a href="http://52.8.135.18/~marcusw1/7623/home.html" class="list-group-item">H O M E</a>
                <a href="#" class="list-group-item">photography</a>
                <a href="#" class="list-group-item">paint</a>
                <a href="#" class="list-group-item">quick-links</a>
               <br>
                <a href="http://52.8.135.18/~marcusw1/main/contact.html" class="list-group-item">contact</a>
                <a href="#" class="list-group-item">social-media</a>

            </div>
     </div>
htmlcsstwitter-bootstrap

Answer №1

Is this what you had in mind?

https://i.sstatic.net/5OKzb.png

   <div class="headBlock">
     <h1>G A L L E R Y</h1>
     <ul><li>Home</li>
       <li>Photography</li>
       <li>paint</li>
       <li>
         quick-links
         <ul>
           <li>link 1</li>
           <li>link 2</li>
           <li>link 3</li>
         </ul>
       </li>
       <li>Contact</li>
       <li>Social Media
         <ul>
           <li>media 1</li>
           <li>media 2</li>
           <li>media 3</li>
         </ul>
       </li>
     </ul>
   </div>

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}

ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
}

ul li:hover {
  background: #555;
  color: #fff;
}

ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
}

ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}

ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

https://jsfiddle.net/g56hLr4z/

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

Increase the vertical distance between rows in a table

Having some issues with customizing a data grid that I developed. Is there a way to eliminate the header bottom border and insert spacing between each row in the table? View Demo Example Code: <dx-data-grid style="margin-top:50px" class="table" [dat ...

htmlcssangulartypescriptdatagrid

Modify the JS/JQuery variable by utilizing the data entered into an HTML input field

I have implemented a javascript/ajax request on my advanced search page. <script> // window.setInterval(function() // { $(function () { var SearchTerm = '<?php echo $_POST['Search']; ...

javascriptjqueryhtmlajax

Layering elements using CSS and HTML to create a background effect

I have created a menu using div elements and I want one of the menu items to have a background that extends behind it to the body. Here is the structure: body { background-image: url(path/body.png); } #menu { overflow: hidden; width: 400px; ba ...

htmlcss

Tips for adjusting the width of your slider revolution

As a newcomer to slider revolution, I am trying to figure out how to make it full width on the screen. So far, I have attempted the following: <!-- START REVOLUTION SLIDER 5.0 --> <div class="rev_slider_wrapper"> ...

jqueryhtmlrevolution-slider

What is the best way to retrieve the URL from a specific HTML tag?

I am attempting to extract all URLs that have id='revSAR' from the provided HTML tag using a Python regex: <a id='revSAR' href='http://www.amazon.com/Altec-Lansing-inMotion-Mobile-Speaker/product-reviews/B000EDKP8U/ref=cm_cr_dp ...

pythonhtmlregexhtml-parsingpython-3.3

How can I retain the value of a String even after clicking the Submit button on a .jsp page?

I am encountering an issue where, after clicking the submit button, I lose the content that was previously stored in my textToConsole variable. Post submission, only "hello" remains in the variable. How can I prevent the loss of the text: "world!"? <% ...

javascriptjavahtmlstringjsp

Concealing Anchor Tags linked to a particular URL

I am working on implementing a Webview in my Android application. I am looking to hide specific tags with a particular href attribute. How can I achieve this? For example, I want to hide Link 2 and Link 4, which have a tracklist in the href attribute with ...

javascriptandroidhtml

Use PHP code to echo a clear division after every third result in MySQL

I am currently displaying results in descending order from a MySQL table using a while loop. I have already set up a pagination system that displays 9 records per page. However, I am facing an issue when trying to implement a CSS break every 3 records in ...

phpmysqlcss

What is the best way to conceal text that is not enclosed in <p> or <span> tags?

I need to hide a specific portion of text in an HTML code snippet, however, the text is not wrapped in any specific element. Here is an example: <div class="content"> Give comfortable and durable place to work with a desk. Lock the center d ...

javascripthtmlcss

Using jQuery to toggle the image of a button based on its id

I have a jQuery function that opens another section when clicking on a div with the class 'open', and changes the image of a button by switching its id for CSS. However, I now need to change the button's image back when it is clicked again. ...

jquerycss

CSS not functioning properly when attempting to set overflow property to scroll

I am facing an issue with a div that has the class specified below: div.textStatement { height: 70px; overflow: hidden; } My goal is to expand the div when a user clicks on a link labeled 'Show More'. This should reveal more text and se ...

jqueryhtmlcss

Implementing the IF statement in jQuery

I've been trying to implement an overflow check when hovering over a div. The issue arises because I'm using jQuery for the hover function and then simple JavaScript for the overflow check in the next step. It seems that directly using an if-then ...

javascriptjqueryhtmlcss

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

It is truly satisfying to be here working on developing a private message inbox for my website, especially after successfully implementing a complete user signup/login and activation system. A few months ago, I never believed I had enough patience to grasp ...

phpjavascriptjquerymysqlhtml

The SQL query in my PHP code is not functioning properly with the specified value

After attempting to organize data from my SQL table by username, I realized that this is based on the user connected to the website. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewpor ...

phphtmlmysqlsqlif-statement

Animating ng-switch transitions within a div element

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

cssangularjscss-transitionstwitter-bootstrap-3

Change the P element to a Span element while maintaining the existing content using the replaceWith

I'm having trouble replacing a p tag with a span while keeping the actual content intact. Can anyone assist me with this, please? $('.anim-letters p').replaceWith( "<span class='letters'>" + $('this').text() + "< ...

jqueryhtmlreplacewith

The anticipated input was a string type, but a BoundField was encountered in Django

Django version: 2.0 python: 3.7 jquery : 3.3.1 bootstrap: 3.3.7 I have integrated ajax into my Django forms by following a tutorial found here. However, I encountered an unusual error when attempting to create a new book or update an existing one. "Expec ...

javascriptpythonhtmldjangodjango-templates

Using the bootstrap-vue library to create a dropdown menu within a div element

Bootstrap-vue is not really my favorite, and I'm having some issues. Is it possible to create something like this without using bootstrap-vue? <div class="dropdown open"> <div data-toggle="dropdown" class="dropdown-toggle">some text&l ...

twitter-bootstrapvue.jsbootstrap-vue

Navigation bar disappears when the page is scrolled to the top

Having an issue with the navbar functionality on my website. It is working properly in Firefox, but not in Chrome and Safari. When scrolling back up to the very top of the page, the navbar hides due to a minor bounce effect which triggers the hide action. ...

javascripthtmlcss

Troubleshooting techniques for resolving CSS issues with the video.js package in ReactJS

When using video.js in react to build a video player, I encountered an issue with the npm package not providing its inbuilt CSS. How can I add the inbuilt CSS of video.js? Instead of the control bar, I am getting something different than what is shown in t ...

cssreactjs